/* 通用选择器*通常不推荐使用
{
  
    margin: 0;
    padding: 0;
} */
/* id选择器 */
#main {
    color: blue;
}

/* 类选择器 */
.news_title {
    color:brown
}

/* 元素选择器 */
h3 {
    color: chocolate;
}

/* 属性选择器 */
[title]{
    font-size: 1.5em;
}

p[data-bind]{
    color: blue;   
}

p[title="abc"]{
    color: chocolate;
}

p[title="ab de"]{
    color: orange;
}

p[title="xyz"]{
    color: fuchsia;
}

a[href][title]{
    color: cadetblue;
    font-size: .75em;
}

/* 伪类与伪元素选择器 */
p:hover {
    background-color: #abc;
}


li:hover{
    background-color: #fbc;
}

a{
    color: red;
}

a:link{
    color:red;
}

a:visited{
    color: purple;
}

a:hover{
    font-weight: bold;
}

a:active{
    color:chartreuse;
}

input:focus{
    background-color: silver;
}

pre:first-child{
    color: red;
}

li:pre:first-child{
    color: red;
}

div p::first-line{
    color: red;
}

div p::first-letter{
    font-weight: bold;
    font-size: 200%;
}

div h1::before{
    content: "before:";
}

div h1::after{
    content: ":after";
}

/* 组合选择器 */
div span{
    color:blueviolet;
}

p > span{
    color: hotpink;
}

pre + span{
    color: crimson;
}

pre ~ span.bro{
    color:forestgreen;
}
